<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="70px">
      <el-row :gutter="24">
        <el-col :span="4">
          <el-form-item label="操作人" prop="username">
            <el-input v-model="form.username" placeholder="请输入操作人" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="操作信息" prop="msg">
            <el-input v-model="form.msg" placeholder="请输入操作信息" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              v-model="form.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="loadData">搜索</el-button>
          <el-button @click="searchResetForm('form')">重 置</el-button>
        </el-col>
      </el-row>

    </el-form>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        align="center"
      />
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="50"
      />
      <el-table-column
        label="操作人"
        prop="name"
        align="center"
      />
      <el-table-column
        label="IP地址"
        prop="ip"
        align="center"
      />
      <el-table-column
        label="类名称"
        prop="className"
        align="center"
        width="300"
      />

      <el-table-column
        label="方法名称"
        prop="methodName"
        align="center"
        width="160"
      />
      <el-table-column
        label="操作模块"
        prop="title"
        align="center"
      />
      <el-table-column
        label="操作信息"
        prop="businessType"
        align="center"
      />
      <el-table-column
        label="执行结果"
        prop="returnStatus"
        align="center"
       >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.returnStatus === '成功' ? 'success' : 'danger'"
            disable-transitions>{{scope.row.returnStatus}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="执行时长"
        prop="consuming"
        align="center"
      />
      <el-table-column
        label="操作时间"
        prop="createTime"
        align="center"
        width="180"
      />


      <el-table-column
        fixed="right"
        label="操作"
        width="100"
        align="center"
      >
        <template slot-scope="scope">

          <el-button
            type="text"
            size="small"
            @click="edit(scope.$index)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" :current-page="pageNum" :page-size="pageSize" @handleChange="handleChange" />
    <el-dialog title="详情" :close-on-click-modal="false" :visible.sync="dialogVisible" width="40%">
      <el-form ref="formLabelAlign"   label-width="140px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="操作模块" prop="title">
              <span v-text="formLabelAlign.title"></span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="操作名称" prop="title">
               <span v-text="formLabelAlign.businessType"></span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="IP地址" prop="title">
              <span v-text="formLabelAlign.ip"></span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求地址" prop="title">
              <span v-text="formLabelAlign.requestAddress"></span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="14">
            <el-form-item label="类名称" prop="title">
              <span v-text="formLabelAlign.className"></span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="方法名称" prop="title">
              <span v-text="formLabelAlign.methodName"></span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="操作时间" prop="title">
              <span v-text="formLabelAlign.createTime"></span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="操作人" prop="title">
              <span v-text="formLabelAlign.name"></span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="执行结果" prop="title">
              <el-tag
                :type="formLabelAlign.returnStatus === '成功' ? 'success' : 'danger'"
                disable-transitions>{{formLabelAlign.returnStatus}}</el-tag>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="请求参数" prop="title">
              <span v-text="formLabelAlign.param"></span>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="返回结果" prop="title">
              <span v-text="formLabelAlign.returnInfo"></span>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>


    </el-dialog>
  </div>


</template>

<script>
import Pagination from '@/components/Pagination'
import { fail, resetForm, showData, success } from '@/api/common'

import { save, lists, get, del, exportExcel, batchDel } from '@/api/requestCommon'

export default {
  name: 'Operate',
  components: {
    Pagination
  },
  data() {
    return {
      dialogVisible: false,
      form: { username: '', createTime: [], msg: '' },
      loading: true,
      selectRows: [],
      type: 'log',
      formLabelAlign:{
      ip:'',name:'',businessType:'',createTime:'',methodName:'',className:'',title:'',param:'',requestAddress:'',returnStatus:'',returnInfo:''
      },
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10

    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    edit(index){
      this.dialogVisible=true;
      this.formLabelAlign=this.tableData[index];
    },
    handleClose(){

    },
    searchResetForm(formName) {
      resetForm(this, formName)
    },
    loadData() {
      this.form.pageNum = this.pageNum
      this.form.pageSize = this.pageSize
      lists(this.type, this.form).then(response => {
        console.log('response', response)
        showData(response, this)
      })
    },
    selectionChange(rows) {
      this.selectRows = rows
    },
    del(index) {
      this.$confirm('此操作将永久删除日志信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(this.type, this.tableData[index].id).then(response => {
          if (response.code === 200) {
            success(response.msg)
            this.loadData()
          } else {
            fail(response.msg)
          }
        })
      }).catch(() => {

      })
    },
    handleChange(pageNum, pageSize) {
      this.pageNum = pageNum
      this.pageSize = pageSize
      this.loadData()
    },
    batchDel() {
      if (this.selectRows.length === 0) {
        fail('请选择要删除的数据')
        return false
      }
      batchDel(this.type, this.selectRows).then(response => {
        console.log('response', response)
        if (response.code === 200) {
          this.loadData()
          success(response.msg)
        } else {
          fail(response.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.del{
  color: red;
}
</style>
